<template>
  <div class="infor">
    <div class="infor-top">
      <div class="infor-t-title">
        <div class="button-box">
          <button class="i-t-green">
            商标专用权质权登记
            <i class="el-icon-question"></i>
          </button>
          <div class="minhint minhint-l">申请得办理业务与申请对象</div>
        </div>
        <div class="button-box">
          <button class="i-t-red">
            添加新的申请人信息 质权人
            <i class="el-icon-question"></i>
          </button>
          <div class="minhint minhint-r">添加新的申请人信息</div>
        </div>
      </div>
      <div class="infor-t-txt">
        <i>质权人->特别说明[@]</i>
        <em>在提交业务时请核对申请主体等信息，与主体信息错误将被退回，影响申请进度</em>
      </div>
      <el-table :data="pledgee" style="width: 100%" border :header-cell-style="getRowClass">
        <el-table-column prop="id" label="#" min-width="40%"></el-table-column>
        <el-table-column prop="subject" label="申请主体" min-width="40%"></el-table-column>
        <el-table-column prop="idnum" label="证件号码" min-width="40%"></el-table-column>
        <el-table-column prop="representative" label="法定代表" min-width="40%"></el-table-column>
        <el-table-column prop="phone" label="联系电话" min-width="40%"></el-table-column>
        <el-table-column prop="mail" label="电子邮箱" min-width="40%"></el-table-column>
        <el-table-column prop="site" label="联系地址" min-width="40%"></el-table-column>
        <el-table-column prop="postalcode" label="邮政编码" min-width="40%"></el-table-column>
        <el-table-column prop="proposer" label="第一申请人" min-width="50%"></el-table-column>
        <el-table-column label="业务管理">
          <template slot-scope="scope">
            <el-button size="small " @click="handleEdit(scope.$index, scope.row)">更新/补全信息</el-button>
            <el-button size="small " type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="infor-bottom">
      <div class="infor-t-title">
        <div class="button-box">
          <button class="i-t-green">
            商标专用权质权登记
            <i class="el-icon-question"></i>
          </button>
          <div class="minhint minhint-l">申请得办理业务与申请对象</div>
        </div>
        <div class="button-box">
          <button class="i-t-red">
            添加新的申请人信息 质权人
            <i class="el-icon-question"></i>
          </button>
          <div class="minhint minhint-r">添加新的申请人信息</div>
        </div>
      </div>
      <div class="infor-t-txt">
        <i>出质人->特别说明[@]</i>
        <em>在提交业务时请核对申请主体等信息，与主体信息错误将被退回，影响申请进度</em>
      </div>
      <el-table
        :data="pledgor"
        style="width: 100%"
        border
        :header-cell-style="getRowClass"
        ref="multipleTable"
        tooltip-effect="dark"
      >
        <el-table-column prop="id" label="#" min-width="40%"></el-table-column>
        <el-table-column prop="subject" label="申请主体" min-width="40%"></el-table-column>
        <el-table-column prop="idnum" label="证件号码" min-width="40%"></el-table-column>
        <el-table-column prop="representative" label="法定代表" min-width="40%"></el-table-column>
        <el-table-column prop="phone" label="联系电话" min-width="40%"></el-table-column>
        <el-table-column prop="mail" label="电子邮箱" min-width="40%"></el-table-column>
        <el-table-column prop="site" label="联系地址" min-width="40%"></el-table-column>
        <el-table-column prop="postalcode" label="邮政编码" min-width="40%"></el-table-column>
        <el-table-column prop="proposer" label="第一申请人" min-width="40%"></el-table-column>
        <el-table-column label="业务管理">
          <template slot-scope="scope">
            <el-button size="small " @click="handleEditTwo(scope.$index, scope.row)">更新/补全信息</el-button>
            <el-button
              size="small "
              type="danger"
              @click="handleDeleteTwo(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="yeinfo">
      <button :disabled="pledgee.length == 0" @click="fillIn">业务填写提交</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pledgee: [
        {
          id: "0-8181",
          subject: "1",
          idnum: "1",
          representative: "1",
          phone: "1",
          mail: "1",
          site: "1",
          postalcode: "1",
          proposer: "1"
        }
      ],
      pledgor: [
        {
          id: "0-8181",
          subject: "1",
          idnum: "1",
          representative: "1",
          phone: "1",
          mail: "1",
          site: "1",
          postalcode: "1",
          proposer: "1"
        }
      ]
    };
  },
  methods: {
    handleEdit(index, row) {
      this.$router.push({
        path: "/completeinfo"
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.pledgee.splice(index, 1);
    },
    handleEditTwo(index, row) {
      this.$router.push({
        path: "/completeinfo"
      });
    },
    handleDeleteTwo(index, row) {
      console.log(index, row);
      this.pledgor.splice(index, 1);
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#e4e7ea";
      } else {
        return "";
      }
    },
    fillIn() {
      this.$router.push({
        path: "/register"
      });
    }
  }
};
</script>

<style lang="less" scoped>
i,
em {
  font-style: normal;
  font-size: 12px;
}
.infor {
  padding: 10px;
  background-color: #e7e8eb;
  .infor-top {
    background-color: #fff;
    padding: 20px;
    .infor-t-title {
      display: flex;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid #e7e8eb;
      .button-box {
        position: relative;
        &:hover .minhint {
          opacity: 1;
        }
        button {
          padding: 4px 12px;
          color: #fff;
          border: none;
          outline: none;
          border-radius: 5px;
          cursor: pointer;
        }
        .minhint {
          position: absolute;
          padding: 2px 5px;
          background-color: #000;
          color: #fff;
          border-radius: 5px;
          font-size: 12px;
          top: 0;
          transform: translateY(15%);
          opacity: 0;
          transition: 0.5s;
        }
        .minhint-l {
          right: -100%;
        }
        .minhint-r {
          left: -125px;
        }
        .i-t-green {
          background-color: #15c377;
          transition: 0.5s;
          &:hover {
            background-color: #16d17f;
          }
        }
        .i-t-red {
          transition: 0.5s;
          background-color: #ca4242;
          &:hover {
            background-color: #fa8181;
          }
        }
      }
    }
    .infor-t-txt {
      text-align: left;
      padding: 16px 0;
      i {
        color: #bd4147;
        font-weight: 600;
      }
    }
  }
  .infor-bottom {
    margin-top: 50px;
    .infor .infor-top();
  }
  .yeinfo {
    text-align: center;
    margin-top: 50px;
    button {
      padding: 4px 12px;
      color: #fff;
      border: none;
      outline: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: #ca4242;
      &:disabled {
        background: #eee;
        color: #000;
      }
    }
  }
}
</style>
